<template>
    <div>
       <div class="textarea_content">
           <textarea :placeholder="placeholder" v-model="textValue" :cols="30" :rows="10"></textarea>
           <div v-if="isShowRequire" class="textarea_require">{{requireText}}</div>
           <div class="textarea_tips">
               <span>{{curLen}}</span>
               <span>/</span>
               <span>{{maxLen}}</span>
            </div>
       </div>
       <div class="submit">
           <button @click="submit">提交</button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            maxLen:200,
            curLen:0,
            textValue:"",
            requireText:"* 内容长度不能超过200！",
            isShowRequire: false,
            placeholder:"请输入内容"
        }
    },
    watch:{
        textValue(newVal){
           this.curLen = newVal ? newVal.length:0;
           this.isShowRequire = this.curLen >= 200;
        }
    },
    methods:{
        submit(){
            if (this.isShowRequire) {
                console.log("不提交");
                return false;
           }
            console.log("内容：",this.textValue);
            let obj = {
                name:"sdsd",
                age:20
            }
            console.log(obj);

        }
    }
}
</script>
<style scoped>
.textarea_content{
    width: 500px;
    position: relative;
}
.textarea_content textarea {
    padding: 0;
    width: 100%;
}
.textarea_require{
    color: red;
    position: absolute;
    left: 0;
}
.textarea_tips{
    position: absolute;
    right: 0;
}
.textarea_tips>span{
    color: #ccc;
}
.submit{
    margin-top: 20px;

}
.div1{
    background: red;
    width: 300px;
    height: 200px;
    border-radius: 20px;
}
.div2{
    background: blue;
    width: 600px;
    display: inline-block;
}
</style>